web renkleri ne demek?

Web renkleri, web sayfası tasarımında kullanılan ve izlenen sayfanın görünümünü düzenlemeye yarayan renklerdir.

Web sayfası yazarlarının düzenledikleri web dosyalarını renklendirmek için kullanabilecekleri çeşitli yöntemler mevcuttur. Renkler RGB renk sisteminde kullanılan üçlü heksadesimal kod ile belirlenebileceği gibi, standart İngilizce adları kullanılarak da belirlenebilir. Renk değerlerini oluşturmak için bir renk seçim aracı veya grafik yazılımı tercih edilebilir.

İlk web tarayıcılar (Mosaic ve Netscape Navigator) X Pencere Sistemi üzerinde çalışan ve X11 renk adlarını kullanan uygulamalardır.

Üçlü Hex

Hex üçlüsü altı haneli, üç-baytlık hexadecimal bir numaradır. HTML, CSS, SVG ve diğer kodlarda renkleri bildirmek için kullanılır. Baytlar, kullanılacak olan rengin kırmızı, yeşil ve mavi bileşenlerini betimler. Her bayt heksadesimal gösterim kullanılıyorsa 00 ile FF arasında, desimal gösterim kullanılıyorsa 0 ile 255 arasında bir sayı ile belirtilir. Heksadesimal üçlü web renklerinde aşağıdaki sırayla birleştirilerek kullanılır:

Bayt 1: kırmızı değer

Bayt 2: yeşil değer

Bayt 3: mavi değer

Örneğin, renk değerleri kırmızı=36, yeşil=104, ve mavi=160 olan bir renk ele alalım. Bu renkteki 36, 104 ve 160 desimal sayıları sırasıyla 24, 68 ve A0 heksadesimal sayılarına denk gelmektedir. Elde ettiğimiz heksadesimal renk değerlerini yan yana yazacak olursak, 2468A0 hex üçlüsünü elde etmiş oluruz.

Bu sistem kullanarak oluşturulabilen renk sayısı:

256 × 256 × 256 = 16,777,216

HTML Renk Kodları

HTML renk adlarına ek olarak, İnternet Explorer ve Mozilla Firefox gibi bazı web tarayıcıları bazı renk adları daha tanımlamışlardır. Kimi tarayıcılar algılamasa da, modern tarayıcılar listedeki tüm renkleri destekler. HTML tanımlamalarında 16 renk adı vardır:

Renk	Hexadesimal	Renk	Hexadesimal	Renk	Hexadesimal	Renk	Hexadesimal
siyah	#000000	gümüş	#c0c0c0	bordo	#800000	kırmızı	#ff0000
lacivert	#000080	mavi	#0000ff	menekşe	#8f00ff	galibarda	#ff00ff
yeşil	#008000	çimen	#00ff00	kahve	#964B00	sarı	#ffff00
teal	#008080	cyan	#00ffff	gri	#808080	beyaz	#ffffff

<table> <tbody> <tr class="odd"> <td><table> <thead> <tr class="header"> <th><a href="HTML" title="wikilink">HTML</a> adı</th> <th><a href="Hexadecimal" title="wikilink">Hex</a> kod <a href="RGB_renk_uzayı" title="wikilink">R G B</a></th> <th>Desimal kod <a href="RGB_renk_uzayı" title="wikilink">R G B</a></th> </tr> </thead> <tbody> <tr class="odd"> <td><big>Kırmızı renkler</big></td> <td></td> <td></td> </tr> <tr class="even"> <td>HintKırmızısı</td> <td>CD 5C 5C</td> <td>205 92 92</td> </tr> <tr class="odd"> <td>AçıkMercan</td> <td>F0 80 80</td> <td>240 128 128</td> </tr> <tr class="even"> <td>Somon</td> <td>FA 80 72</td> <td>250 128 114</td> </tr> <tr class="odd"> <td>KoyuSomon</td> <td>E9 96 7A</td> <td>233 150 122</td> </tr> <tr class="even"> <td>AçıkSomon</td> <td>FF A0 7A</td> <td>255 160 122</td> </tr> <tr class="odd"> <td>Crimson</td> <td>DC 14 3C</td> <td>220 20 60</td> </tr> <tr class="even"> <td>Kırmızı</td> <td>FF 00 00</td> <td>255 0 0</td> </tr> <tr class="odd"> <td>Ateş Kırmızısı</td> <td>B2 22 22</td> <td>178 34 34</td> </tr> <tr class="even"> <td>Koyu Kırmızı</td> <td>8B 00 00</td> <td>139 0 0</td> </tr> <tr class="odd"> <td><big>Pembe renkler</big></td> <td></td> <td></td> </tr> <tr class="even"> <td>Pembe</td> <td>FF C0 CB</td> <td>255 192 203</td> </tr> <tr class="odd"> <td>AçıkPembe</td> <td>FF B6 C1</td> <td>255 182 193</td> </tr> <tr class="even"> <td>Ateşpembesi</td> <td>FF 69 B4</td> <td>255 105 180</td> </tr> <tr class="odd"> <td>KoyuPembe</td> <td>FF 14 93</td> <td>255 20 147</td> </tr> <tr class="even"> <td>MediumVioletRed</td> <td>C7 15 85</td> <td>199 21 133</td> </tr> <tr class="odd"> <td>PaleVioletRed</td> <td>DB 70 93</td> <td>219 112 147</td> </tr> <tr class="even"> <td><big>Turuncu renkler</big></td> <td></td> <td></td> </tr> <tr class="odd"> <td>AçıkSomon</td> <td>FF A0 7A</td> <td>255 160 122</td> </tr> <tr class="even"> <td>Mercan</td> <td>FF 7F 50</td> <td>255 127 80</td> </tr> <tr class="odd"> <td>Domates</td> <td>FF 63 47</td> <td>255 99 71</td> </tr> <tr class="even"> <td>OrangeRed</td> <td>FF 45 00</td> <td>255 69 0</td> </tr> <tr class="odd"> <td>KoyuTuruncu</td> <td>FF 8C 00</td> <td>255 140 0</td> </tr> <tr class="even"> <td>Turuncu</td> <td>FF A5 00</td> <td>255 165 0</td> </tr> <tr class="odd"> <td><big>Sarı renkler</big></td> <td></td> <td></td> </tr> <tr class="even"> <td>Altın</td> <td>FF D7 00</td> <td>255 215 0</td> </tr> <tr class="odd"> <td>Sarı</td> <td>FF FF 00</td> <td>255 255 0</td> </tr> <tr class="even"> <td>Açık Yeşil</td> <td>FF FF E0</td> <td>255 255 224</td> </tr> <tr class="odd"> <td>LemonChiffon</td> <td>FF FA CD</td> <td>255 250 205</td> </tr> <tr class="even"> <td>LightGoldenrodYellow</td> <td>FA FA D2</td> <td>250 250 210</td> </tr> <tr class="odd"> <td>PapayaWhip</td> <td>FF EF D5</td> <td>255 239 213</td> </tr> <tr class="even"> <td>Moccasin</td> <td>FF E4 B5</td> <td>255 228 181</td> </tr> <tr class="odd"> <td>PeachPuff</td> <td>FF DA B9</td> <td>255 218 185</td> </tr> <tr class="even"> <td>PaleGoldenrod</td> <td>EE E8 AA</td> <td>238 232 170</td> </tr> <tr class="odd"> <td>Haki</td> <td>F0 E6 8C</td> <td>240 230 140</td> </tr> <tr class="even"> <td>KoyuHaki</td> <td>BD B7 6B</td> <td>189 183 107</td> </tr> <tr class="odd"> <td><big>Mor renkler</big></td> <td></td> <td></td> </tr> <tr class="even"> <td>Lavender</td> <td>E6 E6 FA</td> <td>230 230 250</td> </tr> <tr class="odd"> <td>Thistle</td> <td>D8 BF D8</td> <td>216 191 216</td> </tr> <tr class="even"> <td>Plum</td> <td>DD A0 DD</td> <td>221 160 221</td> </tr> <tr class="odd"> <td>Menekşe</td> <td>EE 82 EE</td> <td>238 130 238</td> </tr> <tr class="even"> <td>Orkide</td> <td>DA 70 D6</td> <td>218 112 214</td> </tr> <tr class="odd"> <td>Fuchsia</td> <td>FF 00 FF</td> <td>255 0 255</td> </tr> <tr class="even"> <td>Magenta</td> <td>FF 00 FF</td> <td>255 0 255</td> </tr> <tr class="odd"> <td>MediumOrchid</td> <td>BA 55 D3</td> <td>186 85 211</td> </tr> <tr class="even"> <td>MediumPurple</td> <td>93 70 DB</td> <td>147 112 219</td> </tr> <tr class="odd"> <td>BlueViolet</td> <td>8A 2B E2</td> <td>138 43 226</td> </tr> <tr class="even"> <td>DarkViolet</td> <td>94 00 D3</td> <td>148 0 211</td> </tr> <tr class="odd"> <td>DarkOrchid</td> <td>99 32 CC</td> <td>153 50 204</td> </tr> <tr class="even"> <td>DarkMagenta</td> <td>8B 00 8B</td> <td>139 0 139</td> </tr> <tr class="odd"> <td>Mor</td> <td>80 00 80</td> <td>128 0 128</td> </tr> <tr class="even"> <td>Indigo</td> <td>4B 00 82</td> <td>75 0 130</td> </tr> <tr class="odd"> <td>SlateBlue</td> <td>6A 5A CD</td> <td>106 90 205</td> </tr> <tr class="even"> <td>DarkSlateBlue</td> <td>48 3D 8B</td> <td>72 61 139</td> </tr> <tr class="odd"> <td></td> <td></td> <td></td> </tr> </tbody> </table></td> <td><table> <thead> <tr class="header"> <th><a href="HTML" title="wikilink">HTML</a> adı</th> <th><a href="Hexadecimal" title="wikilink">Hex</a> kod <a href="RGB_renk_uzayı" title="wikilink">R G B</a></th> <th>Desimal kod <a href="RGB_renk_uzayı" title="wikilink">R G B</a></th> </tr> </thead> <tbody> <tr class="odd"> <td><big>Yeşil renkler</big></td> <td></td> <td></td> </tr> <tr class="even"> <td>GreenYellow</td> <td>AD FF 2F</td> <td>173 255 47</td> </tr> <tr class="odd"> <td>Chartreuse</td> <td>7F FF 00</td> <td>127 255 0</td> </tr> <tr class="even"> <td>LawnGreen</td> <td>7C FC 00</td> <td>124 252 0</td> </tr> <tr class="odd"> <td>Lime</td> <td>00 FF 00</td> <td>0 255 0</td> </tr> <tr class="even"> <td>LimeGreen</td> <td>32 CD 32</td> <td>50 205 50</td> </tr> <tr class="odd"> <td>PaleGreen</td> <td>98 FB 98</td> <td>152 251 152</td> </tr> <tr class="even"> <td>AçıkYeşil</td> <td>90 EE 90</td> <td>144 238 144</td> </tr> <tr class="odd"> <td>MediumSpringGreen</td> <td>00 FA 9A</td> <td>0 250 154</td> </tr> <tr class="even"> <td>BaharYeşili</td> <td>00 FF 7F</td> <td>0 255 127</td> </tr> <tr class="odd"> <td>MediumSeaGreen</td> <td>3C B3 71</td> <td>60 179 113</td> </tr> <tr class="even"> <td>DenizYeşili</td> <td>2E 8B 57</td> <td>46 139 87</td> </tr> <tr class="odd"> <td>ForestGreen</td> <td>22 8B 22</td> <td>34 139 34</td> </tr> <tr class="even"> <td>Yeşil</td> <td>00 80 00</td> <td>0 128 0</td> </tr> <tr class="odd"> <td>KoyuYeşil</td> <td>00 64 00</td> <td>0 100 0</td> </tr> <tr class="even"> <td>YellowGreen</td> <td>9A CD 32</td> <td>154 205 50</td> </tr> <tr class="odd"> <td>OliveDrab</td> <td>6B 8E 23</td> <td>107 142 35</td> </tr> <tr class="even"> <td>Zeytin</td> <td>80 80 00</td> <td>128 128 0</td> </tr> <tr class="odd"> <td>DarkOliveGreen</td> <td>55 6B 2F</td> <td>85 107 47</td> </tr> <tr class="even"> <td>MediumAquamarine</td> <td>66 CD AA</td> <td>102 205 170</td> </tr> <tr class="odd"> <td>DarkSeaGreen</td> <td>8F BC 8F</td> <td>143 188 143</td> </tr> <tr class="even"> <td>LightSeaGreen</td> <td>20 B2 AA</td> <td>32 178 170</td> </tr> <tr class="odd"> <td>DarkCyan</td> <td>00 8B 8B</td> <td>0 139 139</td> </tr> <tr class="even"> <td>Teal</td> <td>00 80 80</td> <td>0 128 128</td> </tr> <tr class="odd"> <td><big>Mavi renkler</big></td> <td></td> <td></td> </tr> <tr class="even"> <td>Turkuaz</td> <td>00 FF FF</td> <td>0 255 255</td> </tr> <tr class="odd"> <td>Cyan</td> <td>00 FF FF</td> <td>0 255 255</td> </tr> <tr class="even"> <td>LightCyan</td> <td>E0 FF FF</td> <td>224 255 255</td> </tr> <tr class="odd"> <td>PaleTurquoise</td> <td>AF EE EE</td> <td>175 238 238</td> </tr> <tr class="even"> <td>Aquamarine</td> <td>7F FF D4</td> <td>127 255 212</td> </tr> <tr class="odd"> <td>Turquoise</td> <td>40 E0 D0</td> <td>64 224 208</td> </tr> <tr class="even"> <td>MediumTurquoise</td> <td>48 D1 CC</td> <td>72 209 204</td> </tr> <tr class="odd"> <td>DarkTurquoise</td> <td>00 CE D1</td> <td>0 206 209</td> </tr> <tr class="even"> <td>CadetBlue</td> <td>5F 9E A0</td> <td>95 158 160</td> </tr> <tr class="odd"> <td>SteelBlue</td> <td>46 82 B4</td> <td>70 130 180</td> </tr> <tr class="even"> <td>LightSteelBlue</td> <td>B0 C4 DE</td> <td>176 196 222</td> </tr> <tr class="odd"> <td>PowderBlue</td> <td>B0 E0 E6</td> <td>176 224 230</td> </tr> <tr class="even"> <td>Açık mavi</td> <td>AD D8 E6</td> <td>173 216 230</td> </tr> <tr class="odd"> <td>SkyBlue</td> <td>87 CE EB</td> <td>135 206 235</td> </tr> <tr class="even"> <td>LightSkyBlue</td> <td>87 CE FA</td> <td>135 206 250</td> </tr> <tr class="odd"> <td>DeepSkyBlue</td> <td>00 BF FF</td> <td>0 191 255</td> </tr> <tr class="even"> <td>DodgerBlue</td> <td>1E 90 FF</td> <td>30 144 255</td> </tr> <tr class="odd"> <td>CornflowerBlue</td> <td>64 95 ED</td> <td>100 149 237</td> </tr> <tr class="even"> <td>MediumSlateBlue</td> <td>7B 68 EE</td> <td>123 104 238</td> </tr> <tr class="odd"> <td>RoyalBlue</td> <td>41 69 E1</td> <td>65 105 225</td> </tr> <tr class="even"> <td>Mavi</td> <td>00 00 FF</td> <td>0 0 255</td> </tr> <tr class="odd"> <td>MediumBlue</td> <td>00 00 CD</td> <td>0 0 205</td> </tr> <tr class="even"> <td>KoyuMavi</td> <td>00 00 8B</td> <td>0 0 139</td> </tr> <tr class="odd"> <td>Navy</td> <td>00 00 80</td> <td>0 0 128</td> </tr> <tr class="even"> <td>MidnightBlue</td> <td>19 19 70</td> <td>25 25 112</td> </tr> <tr class="odd"> <td></td> <td></td> <td></td> </tr> </tbody> </table></td> <td><table> <thead> <tr class="header"> <th><a href="HTML" title="wikilink">HTML</a> adı</th> <th><a href="Hexadecimal" title="wikilink">Hex</a> kod <a href="RGB_renk_uzayı" title="wikilink">R G B</a></th> <th>Desimal kod <a href="RGB_renk_uzayı" title="wikilink">R G B</a></th> </tr> </thead> <tbody> <tr class="odd"> <td><big>Kahverengi renkler</big></td> <td></td> <td></td> </tr> <tr class="even"> <td>Cornsilk</td> <td>FF F8 DC</td> <td>255 248 220</td> </tr> <tr class="odd"> <td>BlanchedAlmond</td> <td>FF EB CD</td> <td>255 235 205</td> </tr> <tr class="even"> <td>Bisque</td> <td>FF E4 C4</td> <td>255 228 196</td> </tr> <tr class="odd"> <td>NavajoWhite</td> <td>FF DE AD</td> <td>255 222 173</td> </tr> <tr class="even"> <td>Wheat</td> <td>F5 DE B3</td> <td>245 222 179</td> </tr> <tr class="odd"> <td>BurlyWood</td> <td>DE B8 87</td> <td>222 184 135</td> </tr> <tr class="even"> <td>Tan</td> <td>D2 B4 8C</td> <td>210 180 140</td> </tr> <tr class="odd"> <td>RosyBrown</td> <td>BC 8F 8F</td> <td>188 143 143</td> </tr> <tr class="even"> <td>SandyBrown</td> <td>F4 A4 60</td> <td>244 164 96</td> </tr> <tr class="odd"> <td>Goldenrod</td> <td>DA A5 20</td> <td>218 165 32</td> </tr> <tr class="even"> <td>DarkGoldenrod</td> <td>B8 86 0B</td> <td>184 134 11</td> </tr> <tr class="odd"> <td>Peru</td> <td>CD 85 3F</td> <td>205 133 63</td> </tr> <tr class="even"> <td>Chocolate</td> <td>D2 69 1E</td> <td>210 105 30</td> </tr> <tr class="odd"> <td>SaddleBrown</td> <td>8B 45 13</td> <td>139 69 19</td> </tr> <tr class="even"> <td>Sienna</td> <td>A0 52 2D</td> <td>160 82 45</td> </tr> <tr class="odd"> <td>Brown</td> <td>A5 2A 2A</td> <td>165 42 42</td> </tr> <tr class="even"> <td>Maroon</td> <td>80 00 00</td> <td>128 0 0</td> </tr> <tr class="odd"> <td><big>Beyaz renkler</big></td> <td></td> <td></td> </tr> <tr class="even"> <td>Beyaz</td> <td>FF FF FF</td> <td>255 255 255</td> </tr> <tr class="odd"> <td>Kar</td> <td>FF FA FA</td> <td>255 250 250</td> </tr> <tr class="even"> <td>Honeydew</td> <td>F0 FF F0</td> <td>240 255 240</td> </tr> <tr class="odd"> <td>MintCream</td> <td>F5 FF FA</td> <td>245 255 250</td> </tr> <tr class="even"> <td>Azure</td> <td>F0 FF FF</td> <td>240 255 255</td> </tr> <tr class="odd"> <td>AliceBlue</td> <td>F0 F8 FF</td> <td>240 248 255</td> </tr> <tr class="even"> <td>GhostWhite</td> <td>F8 F8 FF</td> <td>248 248 255</td> </tr> <tr class="odd"> <td>WhiteSmoke</td> <td>F5 F5 F5</td> <td>245 245 245</td> </tr> <tr class="even"> <td>Seashell</td> <td>FF F5 EE</td> <td>255 245 238</td> </tr> <tr class="odd"> <td>Beige</td> <td>F5 F5 DC</td> <td>245 245 220</td> </tr> <tr class="even"> <td>OldLace</td> <td>FD F5 E6</td> <td>253 245 230</td> </tr> <tr class="odd"> <td>FloralWhite</td> <td>FF FA F0</td> <td>255 250 240</td> </tr> <tr class="even"> <td>Ivory</td> <td>FF FF F0</td> <td>255 255 240</td> </tr> <tr class="odd"> <td>AntikBeyaz</td> <td>FA EB D7</td> <td>250 235 215</td> </tr> <tr class="even"> <td>Linen</td> <td>FA F0 E6</td> <td>250 240 230</td> </tr> <tr class="odd"> <td>LavenderBlush</td> <td>FF F0 F5</td> <td>255 240 245</td> </tr> <tr class="even"> <td>MistyRose</td> <td>FF E4 E1</td> <td>255 228 225</td> </tr> <tr class="odd"> <td><big>Gri renkler</big></td> <td></td> <td></td> </tr> <tr class="even"> <td>Gainsboro</td> <td>DC DC DC</td> <td>220 220 220</td> </tr> <tr class="odd"> <td>AçıkGri</td> <td>D3 D3 D3</td> <td>211 211 211</td> </tr> <tr class="even"> <td>Gümüş</td> <td>C0 C0 C0</td> <td>192 192 192</td> </tr> <tr class="odd"> <td>KoyuGri</td> <td>A9 A9 A9</td> <td>169 169 169</td> </tr> <tr class="even"> <td>Gri</td> <td>80 80 80</td> <td>128 128 128</td> </tr> <tr class="odd"> <td>DimGray</td> <td>69 69 69</td> <td>105 105 105</td> </tr> <tr class="even"> <td>LightSlateGray</td> <td>77 88 99</td> <td>119 136 153</td> </tr> <tr class="odd"> <td>SlateGray</td> <td>70 80 90</td> <td>112 128 144</td> </tr> <tr class="even"> <td>DarkSlateGray</td> <td>2F 4F 4F</td> <td>47 79 79</td> </tr> <tr class="odd"> <td>Siyah</td> <td>00 00 00</td> <td>0 0 0</td> </tr> </tbody> </table></td> </tr> </tbody> </table>

Web güvenli renkler

Altı çizili olan renk kodları, gerçekten güvenli renklerdir. Yani tüm ekran ve tarayıcılarda aynı sonucu verirler.


<u>000</u>	300	600	900	C00	<u>F00</u>	<u>003</u>	303	603	903	C03	<u>F03</u>
006	306	606	906	C06	F06	009	309	609	909	C09	F09
00C	30C	60C	90C	C0C	F0C	<u>00F</u>	30F	60F	90F	C0F	<u>F0F</u>
030	330	630	930	C30	F30	033	333	633	933	C33	F33
036	336	636	936	C36	F36	039	339	639	939	C39	F39
03C	33C	63C	93C	C3C	F3C	03F	33F	63F	93F	C3F	F3F
060	360	660	960	C60	F60	063	363	663	963	C63	F63
	366	666	966	C66	F66	069	369	669	969	C69	F69
06C	36C	66C	96C	C6C	F6C	06F	36F	66F	96F	C6F	F6F
090	390	690	990	C90	F90	093	393	693	993	C93	F93
096	396	696	996	C96	F96	099	399	699	999	C99	F99
09C	39C	69C	99C	C9C	F9C	09F	39F	69F	99F	C9F	F9F
0C0	3C0	6C0	9C0	CC0	FC0	0C3	3C3	6C3	9C3	CC3	FC3
0C6	3C6	6C6	9C6	CC6	FC6	0C9	3C9	6C9	9C9	CC9	FC9
0CC	3CC	6CC	9CC	CCC	FCC	0CF	3CF	6CF	9CF	CCF	FCF
<u>0F0</u>	3F0	<u>6F0</u>	9F0	CF0	<u>FF0</u>	0F3	<u>3F3</u>	<u>6F3</u>	9F3	CF3	<u>FF3</u>
<u>0F6</u>	<u>3F6</u>	6F6	9F6	<u>CF6</u>	<u>FF6</u>	0F9	3F9	6F9	9F9	CF9	FF9
<u>0FC</u>	<u>3FC</u>	6FC	9FC	CFC	FFC	<u>0FF</u>	<u>3FF</u>	<u>6FF</u>	9FF	CFF	<u>FFF</u>